<template>
  <div style="margin-top: 50px">
    <el-form :model="value" :rules="rules" ref="productInfoForm" label-width="120px" style="width: 600px" size="s米糕">

      <el-form-item label="nft系列名称：" prop="tradename">
        <el-input v-model="value.tradename"></el-input>
      </el-form-item>
      <el-form-item label="商品介绍：">
        <el-input :autoSize="true" v-model="value.seriesdescription" type="textarea" placeholder="请输入内容"></el-input>
      </el-form-item>

      <el-form-item label="系列作者：" prop="uid">
        <el-input v-model="value.author" :disabled="true" class="width_half"></el-input>
        <el-button @click="selectUser">选择作者</el-button>
      </el-form-item>

      <el-form-item label="nft分类：" prop="nftType">
        <el-select v-model="value.nftType" clearable placeholder="请选择">
          <el-option v-for="item in productCateOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="商品售价：">
        <el-input type="number" label-width="120px" class="width_market_price" v-model="value.price"></el-input>
      </el-form-item>
      <el-form-item label="热门商品：">
        <el-switch v-model="value.hot" :active-value="1" :inactive-value="0">
        </el-switch>
      </el-form-item>
       <el-form-item label="商品上架：">
        <el-switch v-model="value.status" :active-value="1" :inactive-value="0">
        </el-switch>
      </el-form-item>
      <el-form-item label="图片：">
        <single-upload v-model="value.pictures" style="width: 300px;display: inline-block;margin-left: 10px">
        </single-upload>
      </el-form-item>
      

      <!--<el-form-item label="排序">
        <el-input v-model="value.sort"></el-input>
      </el-form-item> -->
      <el-form-item style="text-align: center">
        <el-button type="primary" size="medium" @click="handleNext('productInfoForm')">下一步，填写商品促销</el-button>
      </el-form-item>
    </el-form>
    <user ref="userReference" :visible="visible" @updateEdit="updateEdit" @recevice="receiveData"></user>
  </div>
</template>

<script>

import "../../../../../assets/css/basic.css"
import { fetchListWithChildren } from '@/api/productCate'
import { ProductInfoRule } from "../../../../../rules/ProductInfoRule"
import { getUserListByStatus } from '../../../../../api/user';
import SingleUpload from '@/components/Upload/singleUpload'
import {receiveData, updateEdit, selectUser, input} from "../../../../../data/data.js"
export default {
  name: "ProductInfoDetail",
  props: {
    value: Object,
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  components: {
    SingleUpload,
    user: () => import("../../../../../components/SelectUser/index.vue")
  },
  data() {
    return {
      hasEditCreated: false,
      //选中商品分类的值
      selectProductCateValue: [],
      visible: false,
      productCateOptions: [],
      userList: [],
      rules: ProductInfoRule
    };
  },
  created() {

    this.getProductCateList();
    // this.getBrandList();
  },

  mounted() {
    // this.getUserList()
  }
  ,
  computed: {
    //商品的编号
    productId() {
      return this.value.id;
    }
  },
  watch: {
    productId: function (newValue) {
      if (!this.isEdit) return;
      if (this.hasEditCreated) return;
      if (newValue === undefined || newValue == null || newValue === 0) return;
      this.handleEditCreated();
    },
    selectProductCateValue: function (newValue) {
      if (newValue != null && newValue.length === 2) {
        this.value.productCategoryId = newValue[1];
        this.value.productCategoryName = this.getCateNameById(this.value.productCategoryId);
      } else {
        this.value.productCategoryId = null;
        this.value.productCategoryName = null;
      }
    },
   
  },
  methods: {
    selectUser,
    updateEdit,
    receiveData,
    input,

  

    //处理编辑逻辑
    handleEditCreated() {
      if (this.value.nftType != null) {
        this.selectProductCateValue.push(this.value.nftType);
      }
      this.hasEditCreated = true;
    },
    getProductCateList() {
      fetchListWithChildren().then(response => {
        this.productCateOptions = response;
      });
    },
    getUserList() {
      getUserListByStatus().then(response => {
        this.brandOptions = [];
        let userList = response.data;
        for (let i = 0; i < userList.length; i++) {
          this.userList.push({ label: userList[i].username, value: userList[i].id });
        }
      });
    },
    getCateNameById(id) {
      let name = null;
      for (let i = 0; i < this.productCateOptions.length; i++) {
        for (let j = 0; j < this.productCateOptions[i].children.length; j++) {
          if (this.productCateOptions[i].children[j].value === id) {
            name = this.productCateOptions[i].children[j].label;
            return name;
          }
        }
      }
      return name;
    },
    handleNext(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('nextStep');
        } else {
          this.$message({
            message: '验证失败',
            type: 'error',
            duration: 1000
          });
          return false;
        }
      });
    },
    handleAuthorChange(val) {
      let author = '';
      for (let i = 0; i < this.userList.length; i++) {
        if (this.userList[i].value === val) {
          author = this.userList[i].label;
          break;
        }
      }
      this.value.author = author;
    }
  }
}
</script>

<style scoped>

</style>
